<template>
  <div>
    <!--头部-->
    <Header></Header>
    <!--头部-->

    <!--文章咨询详情路径导航布局区-->
    <div class="article">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/index">公司详情</a></el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
    </div>
    <!--文章咨询详情路径导航布局区-->

    <!--个人信息展示布局区  -->
    <div class="article">
      <!--个人信息展示  -->
      <el-row :gutter="20">
        <!--简历展示容器-->
        <el-col :span="24">
          <el-card
              style="
            height: 100%;
            margin-top: 10px;
            padding-bottom: 10px;
            width: 100%;
            border: 3px solid #FFFFFF;
            box-shadow: 1px 2px 5px #999999;"
              shadow="hover">
            <el-col :span="24" style="border: 3px solid #999999;">
              <template v-if="companyInfo">
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">基本信息</span></el-divider>
                    <el-descriptions class="margin-top" :column="3" >
                      <el-descriptions-item label="公司名" :span="4">{{companyInfo.name}}</el-descriptions-item>
                      <el-descriptions-item  label="邮箱">
                        <el-tag size="small">{{companyInfo.email}}</el-tag>
                      </el-descriptions-item>
                      <el-descriptions-item label="网站"><el-tag size="success">{{companyInfo.url}}</el-tag></el-descriptions-item>
                      <el-descriptions-item label="规模"><el-tag size="success">{{companyInfo.size}}</el-tag></el-descriptions-item>
                      <el-descriptions-item label="类型"><el-tag size="success">{{companyInfo.type}}</el-tag></el-descriptions-item>
                      <el-descriptions-item label="账号"><el-tag type="warning" size="small">{{companyInfo.account}}</el-tag></el-descriptions-item>
                      <el-descriptions-item label="联系人"><el-tag type="warning" size="small">{{companyInfo.contact}}</el-tag></el-descriptions-item>
                      <el-descriptions-item label="联系电话"><el-tag type="warning" size="small">{{companyInfo.telephone}}</el-tag></el-descriptions-item>
                      <el-descriptions-item label="注册资金"><el-tag type="warning"size="small">{{companyInfo.registerMoney}}</el-tag></el-descriptions-item>
                      <el-descriptions-item label="联系地址" :span="4"><el-tag type="danger" size="small">{{companyInfo.addr}}</el-tag></el-descriptions-item>
                    </el-descriptions>
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">公司优势</span></el-divider>
                <el-tag
                    v-for="tag in companyInfo.advantageList"
                    :key="tag.name">
                  {{tag.name}}
                </el-tag>
                    <el-divider content-position="left"><span style="font-weight: bolder;color: #2788f3">公司岗位</span></el-divider>
                  <el-divider><i class="el-icon-mobile-phone"></i>职位信息</el-divider>
                  <el-timeline>
                    <el-timeline-item v-for="item in companyInfo.postList" :key="item.id" :timestamp="item.created" placement="top">
                      <h4 style="color: red">【岗位】:{{item.name}}</h4>
                      <el-button  @click="findPostInfoById(item.id)"  size="mini" icon="el-icon-check" type="success" round>查看岗位详情</el-button>
                      <el-button  @click="sendPost(item.id)"  size="mini" icon="el-icon-s-promotion" type="warning" round>岗位投递简历</el-button>

                      <el-button  @click="saveFavorPost(item.id)"  size="mini" icon="el-icon-thumb" type="danger" round>收藏职位信息</el-button>
                    </el-timeline-item>
                  </el-timeline>

              </template>

              <template v-else>
                <div style="float: left">
                  <el-image
                      style="width: 400px; height: 300px;padding: 20px;"
                      fit="fit"
                      src="https://gxuwz-wnx.oss-cn-beijing.aliyuncs.com/images/%E6%B1%82%E8%81%8C%E7%AE%80%E5%8E%86%E9%85%8D%E5%9B%BE.jpg">
                  </el-image>
                </div>
                <div style="float: right; width: 600px; margin-right: 30px;">
                  <div style="text-align: center;font-weight: bolder;">
                    <span style="color: indianred">头上一片晴天</span>
                    <el-divider direction="vertical"></el-divider>
                    <span style="color: indianred">心中一个想念</span>
                    <el-divider content-position="right">少年包青天</el-divider>
                  </div>

                  <div>
                    <h3>【成都】 ——赵雷</h3>
                    <p>让我掉下眼泪的 ,不止昨夜的酒</p>
                    <p>让我依依不舍的,不止你的温柔,余路还要走多久,你攥着我的手,让我感到为难的,是挣扎的自由</p>
                    <p>分别总是在九月,回忆是思念的愁</p>
                    <p>深秋嫩绿的垂柳, 亲吻着我额头</p>
                    <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                    <p>在那座阴雨的小城里,我从未忘记你, 成都 带不走的 只有你.</p>
                  </div>
                  <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
                </div>

              </template>

            </el-col>
          </el-card>
        </el-col>
        <!--简历展示容器-->


      </el-row>
      <!--个人信息展示  -->
    </div>
    <!--个人信息展示布局区  -->

    <!--岗位信息详情框-->
    <el-dialog
        title="提示"
        :visible.sync="dialogFormVisible"
        width="600px"
        :before-close="handleAddFormClose">
      <el-descriptions title="岗位信息详情" direction="vertical" :column="4" border>
        <template v-if="post">
          <el-descriptions-item label="职位名称">{{post.name}}</el-descriptions-item>
          <el-descriptions-item label="受教育程度">{{post.education}}</el-descriptions-item>
          <el-descriptions-item label="工作经验">{{post.experience}}</el-descriptions-item>
          <el-descriptions-item label="工资">
            <el-tag size="small">{{post.salary}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="岗位描述" :span="4">{{post.description}}</el-descriptions-item>
          <el-descriptions-item label="招聘人数">{{post.count}}</el-descriptions-item>
          <el-descriptions-item label="工作地">{{post.address}}</el-descriptions-item>
        </template>

      </el-descriptions>
    </el-dialog>
    <!--岗位信息详情框-->
  </div>
</template>

<script>
import '@/assets/css/styles.css'
import HotArticle from "@/front/inc/HotArticle";
import Footer from "@/front/inc/Footer";
import Header from "@/front/inc/Header";
import {savePost} from "@/api/favor";
import {findDetailById} from "@/api/company";
import {findById} from "@/api/post";
import {sendPost} from "@/api/send";
export default {
  name: "CompanyDetail",
  components: {HotArticle, Footer,Header},
  data() {
    return {
      companyInfo:{}, //公司信息
      dialogFormVisible:false,//职位详情显示框
      post:{}//职位信息

    }
  },
  created() {
    this.findCompanyDetailById(this.$route.params.id);
  },
  mounted() {
    this.findCompanyDetailById(this.$route.params.id);
  },
  methods: {

    //收藏喜欢的职位
    saveFavorPost(id){
      savePost(id).then(res=>{
        this.$message({
          showClose: true,
          message: '收藏职位信息成功！',
          type: 'success',
          onClose: () => {
            this.findPostList()
          }
        })
      })
      },

    //查询公司详细信息
    findCompanyDetailById(id) {
      findDetailById(id).then(res=>{
        this.companyInfo = res.data
      })

    },

    //关闭岗位信息详情框窗口的方法
    handleAddFormClose() {
      this.dialogFormVisible = false
    },
    //根据职位ID查询职位信息
    findPostInfoById(id) {
      this.dialogFormVisible = true
      findById(id).then(res=>{
        this.post = res.data;
      })
    },

    //岗位投递
    sendPost(id){
      sendPost(id).then(res=>{
        //弹出成功提示框，显示成功信息
        this.$notify({
          message: '岗位投递成功，系统处理当中！',
          type: 'success',
        })
      })
    },


  }
}
</script>

<style scoped>
.item {
  margin-top: 10px;
  margin-right: 40px;
}

/*求职状态标题*/
.job-status__title {
  float: left;
  margin-bottom: 29px;
  font-size: 24px;
  color: #333;
  letter-spacing: 1.21px;
}
/*求职状态标题*/

/*求职状态必填标识项*/
.job-status__title__must {
  background: #ef7c67;
  border-radius: 2px;
  display: inline-block;
  width: 34px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  vertical-align: 4px;
}
/*求职状态必填标识项*/

/*个人信息包裹容器*/
.profile-pre-wrapper {
  clear: both;
  position: relative;
  color: #333;
  padding-top: 20px;
}
/*个人信息包裹容器*/




</style>
